<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>直播</title>
  <link rel="stylesheet" href="css/broadcast.css">
  <link rel="stylesheet" href="font/iconfont.css">
  <script src="js/broadcast.js"></script>

</head>
<body>
<div class="top-nav">
  <ul>
    <li>听见</li>
    <li class="active">看见</li>
    <li>交友</li>
    <li>互动</li>
    <li>推荐</li>
    <li>KTV</li>
    <li style="">➕</li>
  </ul>
</div>
<div class="content">
  <div class="tabs">
    <span class="active">热门</span>
    <span>新人</span>
    <span>音乐</span>
    <span>颜值</span>
    <span>嗨聊</span>
    <span>团播</span>
  </div>
  <div class="video-grid">
    <div class="video-card">
      <img src="picture/s1.jpg" alt="视频1">
      <div class="info">
        <span>兵临城下</span>
        <span>HMH阿怪</span>
        <span>5.1万</span>
      </div>
    </div>
    <div class="video-card">
      <img src="picture/s2.jpg" alt="视频2">
      <div class="info">
        <span>热门主播</span>
        <span>言言💖</span>
        <span>2.6万</span>
      </div>
    </div>
    <div class="video-card">
      <img src="picture/s3.jpg" alt="视频3">
      <div class="info">
        <span>兵临城下</span>
        <span>脱发大脑门的</span>
        <span>4.7万</span>
      </div>
    </div>
    <div class="video-card">
      <img src="picture/s4.jpg" alt="视频4">
      <div class="info">
        <span>PK</span>
        <span>李双双</span>
        <span>4.6万</span>
      </div>
    </div>
    <div class="video-card" style="margin-bottom: 12vw">
      <img src="picture/s5.jpg" alt="视频5">
      <div class="info">
        <span>兵临城下</span>
        <span>某主播</span>
        <span>8.9万</span>
      </div>
    </div>
    <div class="video-card " style="margin-bottom: 12vw">
      <img src="picture/s6.jpg" alt="视频6">
      <div class="info">
        <span>兵临城下</span>
        <span>某视频</span>
        <span>8.9万</span>
      </div>
    </div>
  </div>
</div>


<div class="footer">
  <div>
    <a href="index.html">
      <span class="icon iconfont">&#xe818;</span>
      <div class="footer-item">首页</div>
    </a>
  </div>
  <div>
    <a href="broadcast.html">
      <span class="icon iconfont">&#xe8c1;</span>
      <div class="footer-item">直播</div>
    </a>
  </div>
  <div>
    <a href="more.html">
      <span class="icon iconfont">&#xe62e;</span>
      <div class="footer-item">更多</div>
    </a>
  </div>
  <div>
    <a href="community.html">
      <span class="icon iconfont">&#xe627;</span>
      <div class="footer-item">社区</div>
    </a>
  </div>
  <div>
    <a href="my.html">
      <span class="icon iconfont">&#xe819;</span>
      <div class="footer-item">我的</div>
    </a>
  </div>
</div>


</body>
</html>
